<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性盒子</title>
</head>
<body>
<div class="flex-container">
    <div class="flex-item">flex item 1</div>
    <div class="flex-item">flex item 2</div>
    <div class="flex-item">flex item 3</div>
</div>
<div class="b">
    <div class="b1">item1</div>
    <div class="b1">item2</div>
    <div class="b1">item3</div>
</div>
<div class="c">
    <div class="c1">居中</div>
</div>
<div class="d">
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">4</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
</div>
<div class="e">
    <div class="e1">1</div>
    <div class="e2">2</div>
    <div class="e3">3</div>
</div>
<style>
    .e1{
      flex: auto;
    }
    .e2{
        flex: 1;
    }
    .e3{
        flex: 3;
        order:-1
    }
    .d1{
        align-self: flex-start;
    }
    .d2{
        align-self: flex-end;
    }
    .d3{
        align-self: center;
    }
    .d4{
        align-self: baseline;
    }
    .d5{
        align-self: stretch;
    }

    .c1{
        margin: auto !important;
    }

    body .b{

        justify-content: space-around;
        align-items: center;
    }
    .flex-container ,.b,.c,.d,.e{
        width: 400px;
        height: 250px;
        display: flex;
        background-color: red;
    }
    .flex-item,.b1,.c1,.d div,.e div{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 10px;
    }
</style>
</body>
</html>